<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>{{ appTitle }}</p>
    <p>node版本:{{ node }}</p>
    <p>chrome版本:{{ chrome }}</p>
    <p>electron版本:{{ electron }}</p>
    <hr />
    <h1>electron主进程与渲染进程通信</h1>
    <p style="color: #f00">发送后主进程等待一秒返回消息</p>
    <input type="text" v-model.trim="message" :disabled="isDisabled" />
    <button @click="handleDemo" :disabled="isDisabled">发送信息</button>
    <p v-for="(item, index) in electronMainMessage" :key="index">{{ item }}</p>
  </div>
</template>

<script setup name="Home">
import { ref } from 'vue'

const isDisabled = ref(false)
const appTitle = import.meta.env.VITE_APP_TITLE
const node = window.rocApi.node()
const chrome = window.rocApi.chrome()
const electron = window.rocApi.electron()

const electronMainMessage = ref([])
const message = ref('')
function handleDemo() {
  isDisabled.value = true
  window.rocApi
    .demo(message.value)
    .then((res) => {
      isDisabled.value = false
      electronMainMessage.value.push(res)
      message.value = ''
    })
    .catch((err) => {
      isDisabled.value = false
      console.log(err)
    })
}
</script>

<style lang="scss" scoped>
.home {
  h1 {
    font-size: 18px;
  }
  .home-nav {
    a {
      font-weight: bold;
      color: #2c3e50;
      &.router-link-active {
        color: #ff9999;
      }
    }
  }
}
</style>
